<template>
  <div class="index">
    <div class="top">
      <div class="image">
        <img src="../../assets/images/首页logo.png" />
      </div>
      <div class="font">
        <span class="font1">医疗诊断</span>
        <span class="font2">预约挂号</span>
        <span class="font3" @click="GoDiagnosis">在线诊断</span>
        <span class="font4" @click="$router.push('/user')">健康信息</span>
      </div>
      <div class="login" v-if="UserStore.token == ''">
        <span class="login-hover" @click="$router.push('/login')">用户登录</span>
        <span class="login-hover" @click="$router.replace('/doctor')">医生登录</span>
        <span class="login-hover" @click="$router.push('/reg')">注册</span>
      </div>
      <div class="login" v-else>
        <span>{{ UserStore.account }}</span>
        <span class="login-hover" @click="vis_logout=true">退出登录</span>
      </div>

      <!-- 退出登录确认对话框 -->
      <el-dialog
        v-model="vis_logout"
        width="500px"
    >
        <span style="font-size:22px;margin-left: 20px;">确认退出吗？</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="vis_logout=false">取消</el-button>
            <el-button type="primary" @click="logout()">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

    </div>
    <el-divider></el-divider>
    <div class="search">
      <el-input v-model="keyword" style="width: 500px; margin-bottom: 20px;border-radius: 12px; font-size: 18px;"
        placeholder="请输入地区或医院" />
      <el-button class="el-button-interval" type="primary" @click="search">搜索</el-button>
    </div>
    <div class="tag">
      <div class="content">
        <!-- 省份 -->
        <div style="display: flex;height: 40px;">
          <span class="font-p" style="width: 120px;margin-right: 10px;">省份：</span>
          <div class="province-list">
            <!-- 省份列表 -->
            <span class="province-list-item" :class="{ 'active': allHospital.province == item }"
              v-for="(item, index) in province_up" :key="index" @click="allHospital.province = item, searchCard(true)">{{
              item
              }}</span>
            <!-- 点击展开更多 -->
            <button class="button" v-show="!isExpanded" @click="isExpanded = true">
              更多
            </button>
            <!-- 展开后的省份列表 -->
            <div v-if="isExpanded" style="position: absolute;top:25px">
              <span v-if="isExpanded" class="province-list-item" :class="{ 'active': allHospital.province == item }"
                v-for="(item, index) in province_down" :key="index"
                @click="allHospital.province = item, searchCard(true)">{{
                item }}</span>
              <!-- 点击收起 -->
              <button v-if="isExpanded" style="width: 75px;height: 30px;font-size: 20px;margin-top: 1px;"
                @click="isExpanded = false">收起</button>
            </div>
          </div>
        </div>
        <!-- 医院性质 -->
        <div style="margin-top: 20px;">
          <span class="font-p">医院性质：</span>
          <span v-for="(item, index) in quality" :key="index" class="font-p-text"
            :class="{ 'active': allHospital.quality == item }" @click="searchCard(true), allHospital.quality = item">{{ item
            }}</span>
        </div>
        <!-- 医院类别 -->
        <div class="font-interval">
          <span class="font-p">医院类别：</span>
          <span v-for="(item, index) in category" :key="index" class="font-p-text"
            :class="{ 'active': allHospital.category == item }" @click="searchCard(true), allHospital.category = item">{{ item
            }}</span>
        </div>
        <!-- 医院等级 -->
        <div class="font-interval">
          <span class="font-p">医院等级：</span>
          <span v-for="(item, index) in HospitalGrade" :key="index" class="font-p-text"
            :class="{ 'active': allHospital.grade == item }" @click="searchCard(true), allHospital.grade = item">{{ item
            }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <Card_Hospital v-if="hospital.length > 0" v-for="item in hospital" :key="item.id" :hosname="item.name"
        :address="item.address" :imgUrl="item.img" :excel="item.skilled" :introduction="item.introduction"
        :hclass="item.hclass" :page="current_page" :pageSize="10" :id="item.id" class="card"
        @click="$router.push({
        path:'/register',
        query:{
          id:item.id,
          hclass:item.hclass,
          hospital:item.name
          }
      })"/>
      <span v-else>暂无数据</span>
    </div>
    <el-pagination v-show="hospital.length > 0" size="large" background layout="prev, pager, next" :total="totalPage"
      v-model:current-page="current_page" @current-change="searchCard(false)" />
  </div>
  <!-- <el-button type="danger" @click="test(437)"></el-button> -->
</template>

<script setup type="moudle">
import { reactive, ref, onMounted } from "vue";
import Card_Hospital from '@/components/Card_Hospital.vue'
import { useRouter } from "vue-router";
import { reqSearchHospital, reqGetHosdetail } from "@/api/hospital";

// 进度条
import NProgress from "nprogress";

import "nprogress/nprogress.css"

// 取消进度条加载圆圈
NProgress.configure({ showSpinner: false });

const $router = useRouter()

onMounted(async () => {
  searchCard(true)
})

// 存储省份信息
const province_up = ['北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽',
  '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州']
const province_down = ['云南', '陕西', '甘肃', '青海', '内蒙古', '广西', '西藏', '宁夏', '新疆', '香港', '澳门', '台湾']
let isExpanded = ref(false)

// 存储医院分类
const HospitalGrade = ['三甲', '三乙', '三丙', '三级', '二甲', '二乙', '二丙', '二级', '一甲', '一乙', '一丙', '一级', '未定级']
const quality = ['公立医院', '非公立医院']
const category = ['综合医院', '专科医院']
// 控制选中样式
let allHospital = reactive({ quality: '', category: '', grade: '', province: '' })

//用户信息
let UserStore = JSON.parse(localStorage.getItem('USERSTORE')) || reactive({
  account: '',
  age: null,
  idCard: '',
  phone: '',
  password: '',
  confirmPassword: '',
  sex: '',
  token: ''
})
// 退出登录
let vis_logout=ref(false)
const logout = () => {
  vis_logout.value=false
  NProgress.start()
  UserStore.account = ''
  UserStore.token = ''
  localStorage.clear()
  location.reload(true);
  NProgress.done()
}


// 存储医院信息并展示
let hospital = ref([])
// 存储当前页
let current_page = ref(1)
// 存储总条目数
let totalPage = ref(100)

// 收集用户输入的关键词
let keyword = ref('')
// 点击搜索
const search = async () => {
  if (!keyword.value.trim()) {
    alert('输入不能为空')
    return
  }
  // window.scrollTo(0, 0);
  current_page.value = 1
  NProgress.start()
  let res = await reqSearchHospital(current_page.value, 10, keyword.value)
  NProgress.done()
  console.log(res)
  if (res.data.code == 1) {
    hospital.value = res.data.data.records
    totalPage.value = res.data.data.total
    keyword.value = ''
  }
}

// 点击分类选项卡获取医院数据
const searchCard = async (flag) => {
  window.scrollTo(0, 0);
  NProgress.start()
  // 获得数据后将当前页置为1
  if (flag) {
    current_page.value = 1
  }
  let res = await reqGetHosdetail(parseInt(current_page.value), 10, allHospital.province, allHospital.quality, allHospital.grade, allHospital.category)
  NProgress.done()
  // console.log(res)
  // console.log(parseInt(current_page.value), 10, allHospital.province, allHospital.quality, allHospital.grade, allHospital.category)
  if (res.data.code == 1) {
    hospital.value = res.data.data.records
    totalPage.value = res.data.data.total
    keyword.value = ''
  }
}

// 跳转在线问诊
const GoDiagnosis = () => {
  $router.push('/diagnosis')
}


</script>

<style lang="scss" scoped>

.index {
  background-color: #f2f2f2;
  min-width: 1800px;
  .top {
    height: auto;
    min-height: 142px;
    display: flex;
    align-items: center;
    background: linear-gradient(#41cad1, 30%, #f2f2f2);

    .image {
      margin-left: 70px;

      img {
        width: 116px;
        height: 116px;
      }
    }

    .font {
      margin-left: 60px;
      color: #fff;
      font-weight: 600;

      .font1 {
        margin-left: 40px;
        font-size: 52px;
        font-style: italic;
      }

      .font2 {
        margin-left: 60px;
        font-size: 36px;
        color: #0984e3;
      }

      .font3 {
        margin-left: 60px;
        font-size: 36px;
      }

      .font4 {
        margin-left: 60px;
        font-size: 36px;
      }
    }

    .login {
      color: #fff;
      margin-left: 220px;
      font-size: 24px;
      font-weight: 800;
    }

    .login-hover {
      margin-left: 10px;
      margin-right: 15px;
    }

    .login-hover:hover {
      cursor: pointer;
      color: #c0c0c0;
    }

    .font2:hover {
      cursor: pointer;
      color: #0984e3;

    }

    .font3:hover {
      cursor: pointer;
      color: #0984e3;

    }

    .font4:hover {
      cursor: pointer;
      color: #0984e3;

    }
  }

  .search {
    display: flex;
    align-items: center;
    justify-content: center;

    .el-button-interval {
      margin-bottom: 20px;
      margin-left: 10px;
    }
  }

  .tag {
    background-color: #fff;
    height: 220px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-right: 35px;

    .content {
      margin-left: 30px;

      .button {
        height: 30px;
        width: 80px;
        font-size: 20px;
        margin-right: 15px;
      }

      .province-list {
        display: flex;
        flex-wrap: wrap;
        font-size: 20px;
        height: 25px;
        margin-left: -20px;
        position: relative;

        .province-list-item {
          margin-right: 30px;
        }

        .province-list-item:hover {
          color: #0984e3;
          cursor: pointer;
        }
      }

      .province {
        margin-left: 35px;
        font-size: 20px;
      }

      .font-interval {
        margin-top: 25px;
      }

      .font-p {
        font-weight: bold;
        font-size: 20px;
      }

      .font-p-text {
        font-size: 20px;
        // margin-left: 10px;
        margin-right: 10px;
      }

      .font-p-text:hover {
        cursor: pointer;
        color: #0984e3;
      }
    }

  }

  .main {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 35px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .card:hover{
      cursor: pointer;
      transform: scale(1.02);
      transition: 0.5s ease-in-out;
    }
    .card:not(:hover){
      transition: transform 0.5s ease-in-out;
    }
    span {
      font-size: 40px;
      color: #bbb;
      margin-top: 20px;
    }

    el-pagination {
      margin-top: 20px;
    }
  }

  .active {
    color: #0984e3;
  }

  ::v-deep(.el-pagination) {
    margin-top: 20px;
    margin-left: 50px;

    .btn-prev {
      transform: scale(1.5);
      margin-right: 30px;
    }

    .el-pager {
      transform: scale(1.5);
      margin-left: 80px;

      .number {
        margin-right: 20px;
      }
    }

    .btn-next {
      transform: scale(1.5);
      margin-left: 90px;
    }
  }
}

::v-deep(.el-overlay) {
  height: 100vh !important;
}
</style>
